{extend name="public/base"/}
{block name="style"}
<style type="text/css">
    .layui-card-body > div:first-child {width: auto;height:700px;}
    #btn-search{margin-top: -6px;}
</style>
{/block}
{block name="body"}
<div class="space-box">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header layui-form">
                    <div class="layui-col-xs3">
                        <input type="text" name="sku" id="sku-input" autofocus placeholder="SPU/SKU" class="layui-input">
                    </div>
                    <div class="layui-col-xs1">
                        <select name="year"  lay-filter="year" id="year-select">
                            {foreach $year as $y}
                            <option value="{$y}">{$y}年</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-col-xs1">
                        <select name="year"  lay-filter="month" id="month-select">
                            <option value="">请选择</option>
                            {foreach $month as $m}
                            <option value="{$m}">{$m}月</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-col-xs1">
                        <button type="button" class="layui-btn layui-btn-normal" id="btn-search"><i class="layui-icon layui-icon-search"></i></button>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="year-sales"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/admin/js/echarts.min.js"></script>
<script src="/static/admin/js/MyChart.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'jquery', 'form'], function()
    {
        var  layer = layui.layer
            , form = layui.form
            , $ = layui.jquery;

        // 按下回车
        $("#sku-input").keydown(function(event)
        {
            if(event.keyCode != 13) return;
            $("#btn-search").click();
        });
        // 查看指定年份订单
        form.on('select(year)', function(data)
        {
            renderChartYear($("#sku-input").val().trim(), data.value, $("#month-select").val().trim());
        });
        // 查看指定年份订单
        form.on('select(month)', function(data)
        {
            renderChartYear($("#sku-input").val().trim(), $("#year-select").val().trim(), data.value);
        });
        $("#btn-search").click(function()
        {
            renderChartYear($("#sku-input").val().trim(), $("#year-select").val().trim(), $("#month-select").val().trim());
        });
        renderChartYear();
        function renderChartYear(sku, year, month)
        {
            year = year || $("#year-select").val();
            var url = "{:url('')}?" + $.param({sku, year, month})
            layer.load(0, {shade: false});
            $.get(url + "&type=order").done(function(response)
            {
                layer.closeAll('loading');
                if(response.code == 1)
                {
                    MyChart.bar($("#year-sales"), response.data);
                }
                else
                {
                    layer.msg(response.msg, {icon: 5})
                }
            });
        }

    });
</script>
{/block}